<template>
	<view :style="hide ? 'background:rgba(0,0,0,0.7);' : 'opacity:0;height:0vh'" class="wrapper">
		<view :class="hide ? 'into' : 'out' " class="conent">
			<view @click="close" class="title">{{title}}</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			hide:{
				type: Boolean,
				default: () => false
			},
			title:{
				type: String,
				default: () => '选择相关老师'
			}
		},
		methods:{
			close(){
				this.$emit('close', false)
			}
		}
	}
</script>

<style lang="scss" scoped>

.wrapper{
	z-index: 1000;
	position: fixed;
	left: 0px;
	width: 100vw;
	height: 100vh;
	bottom: 0px;
	transition: all .2s linear;
	.into{
		bottom: 0px;
		width: 100%;
		transition: all .2s linear;
	}
	.out{
		bottom: -70%;
		width: 0%;
		transition: all .2s linear;
	}
}
.title{
	position: relative;
	width: 100%;
	display: inline-block;
	font-size: 21px;
	padding: 30px;
	&::after{
		content: '';
		width: 30px;
		height: 30px;
		position: absolute;
		right: 100px;
		background-image: url('../static/img/icon_close@3x.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
}
.conent{
		width: 0%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -70%;
		height: 70%;
		background:#fff;
		opacity: 1;
		border-radius:15px 15px 0px 0px;
	}
</style>
